// 引入css样式
import '../assets/css/order.css'
// 头部组件
import Header from '../common/header'
import { useEffect, useState } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'


function Order() {
    const { state } = useLocation()
    const limit_money = state == null ? 0:Number(state.limit_money)
    const money = state == null ? 0 : Number(state.money)
    // 存商品
    let [shop, setshop] = useState([])
    // 存价格
    let [sum, setsum] = useState()
    useEffect(() => {
        // 从本地获取商品信息
        setshop([...JSON.parse(sessionStorage.getItem('shopInfo'))])
        // 页面已=一加载调用计算价格方法
        Num()
    }, [sum])


    // 计算总价
    function Num() {
        let sum = 0
        shop.map(item => {
            sum += item.price * item.num
        })
        setsum(sum.toFixed(2))
    }
    let Navigate = useNavigate()
    // 点击跳转优惠卷券面
    function govoucher() {
        Navigate('/voucher')
    }


    return (
        <div className="Affirm_box">
            <div className='A_header'>
                <Header title={'订单页'}></Header>
                <div className='A_H_bot'>
                    <div >
                        <p>代用名 &nbsp;  188 **** 8888</p>
                        <p>北京市 昌平区</p>
                        <p>朱辛庄中公教育实训基地IT教学楼 2号楼  2202室</p>
                    </div>
                </div>
            </div>

            <div className='A_hart'>
                <p>
                    <img src={require('../assets/img/order/title-icon@3x.png')} alt="" />
                    <span>品牌精选</span>
                    <span className='fr clearfix' onClick={() => govoucher()}>领券</span>
                    <span className='fr clearfix'>|</span>
                    <span className='fr clearfix'>已免运费</span>
                </p>
            </div>
            <div className='A_body'>
                <ul>
                    {
                        shop.map(item => {
                            return (
                                <li key={item.id}>
                                    <div className='imgs fl clearfix'><img src={item.img} alt="" /></div>
                                    <div className='box fr clearfix'>
                                        <p className='B_ps1'><span>限时</span>{item.goodsname}</p>
                                        <p className='B_ps2'>数量：{item.num}</p>
                                        <p className='B_ps3'><span>￥</span><span>{item.price}</span><s>￥{item.oldprice}</s></p>
                                        <p className='B_ps4'><span>7天无理由退货</span><span>特价</span></p>
                                    </div>
                                </li>
                            )
                        })
                    }
                </ul>

                <div className='A_B_nav'>
                    <p>发票类型  <span className='fr clearfix'>不开发票</span></p>
                    <p>售后免邮  <span className='fr clearfix'>部分商家赠送</span></p>
                    <p>买家留言  <span className='fr clearfix'>填写内容需要与商家协商并确认，45字以内</span></p>
                </div>

                <div className='A_B_nav'>
                    <p>商品金额  <span className='fr clearfix'>￥{sum}</span></p>
                    <p>优惠活动  <span className='Red fr clearfix'>-￥{sum < limit_money ? 0 :money}元</span></p>
                    <p onClick={() => govoucher()}>优惠券  <span className='fr clearfix'>{state == null ? '点击使用' : state.title}</span></p>
                </div>
            </div>
            <div className='A_footer'>
                <div className='fl clearfix'>
                    <p className='A_f_d_ps1'><span className='fl clearfix'>合计</span><span className='fr clearfix'>￥{sum < limit_money ? sum : sum - money}</span></p>
                    <p className='A_f_d_ps2'><span className='fl clearfix'>已免运费</span><span className='fr clearfix'>已优惠￥{sum < limit_money ? 0 : money}元</span></p>
                </div>
                <button className='fr clearfix'>立即支付</button>
            </div>
        </div>
    )
}


export default Order